<template>
    <div class="content">
        <div class="top_title">商品资料</div>
        <div class="operation">
        <el-button class="button" @click="addProduct">新增</el-button>
        <el-button class="button" @click="importFile = !importFile">导入</el-button>
        <el-button class="button">导出</el-button>
        <!-- 分类 -->
        <div class="type_option">
            <el-select
            v-model="typeid"
            placeholder="全部分类"
            size="small"
            style="width: 120px"
            @change="typeChange"
            >
            <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
            </el-select>
        </div>
        <!-- 输入框 -->
        <div class="input">
            <el-input
            v-model="keyword"
            placeholder="条码/商品名称"
            style="height: 22px; width: 240px"
            @blur="onBlur"
            ></el-input>
        </div>
        <!-- 提交 -->
        <div class="confirm">
            <el-button @click="sreach">查询</el-button>
        </div>
        </div>
        <!-- 商品列表 -->
        <div class="produc_list">
            <el-table
                :data="productList"
                style="width: 100%"
                border
                stripe
                height="100%"
            >
                <el-table-column type="index" label="口" width="40" />
                <el-table-column label="操作" width="70">
                  <template #default="scope">
                    <el-button link type="primary" @click="editProduct(productList[scope.$index].id)">
                      编辑
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column type="index" label="图片" width="55">
                <template #default="scope">
                    <el-image
                    :src="productList[scope.$index].thumb_text"
                    style="width: 30px; height: 30px"
                    fit="contain"
                    ></el-image>
                </template>
                </el-table-column>
                <el-table-column prop="barcode" label="条码" width="140" />
                <el-table-column prop="name" label="商品名称" width="200" />
                <el-table-column prop="specifi" label="规格" width="200" />
                <el-table-column prop="type_name" label="分类" width="120" />
                <el-table-column prop="unit" label="主单位" width="70" />
                <el-table-column prop="price" label="销售价" width="120" />
                <el-table-column prop="originalprice" label="原价" width="120" />
                <el-table-column prop="purprice" label="进货价" width="120" />
                <el-table-column prop="createtime" label="创建时间" width="140" />
            </el-table>
            <!-- 添加商品模块 -->
        <div class="add_product" :class="{transition:transition}">
                <EditProduct 
                  @close="onClose" 
                  v-if="transition" 
                  :type-list="typeList" 
                  :pro-id="proId"/>
            </div>
        </div>
        <!-- 分页 -->
        <div class="pages">
          <div class="pages_left">共{{count}}种商品</div>
          <div class="pages_right">
            <el-button @click="pageHandle('start')">{{ "|<首页" }}</el-button>
            <el-button @click="pageHandle('-')">{{ "《前一页" }}</el-button>
            <div class="page_num">第<el-input v-model="page" style="width:40px;padding:0;"></el-input>页</div>
            <div class="page_num">共{{count_page}}页</div>
            <el-button @click="pageHandle('+')">{{ "后一页》" }}</el-button>
            <el-button @click="pageHandle('end')">{{ "尾页>|" }}</el-button>
          </div>
        </div>
        <div class="import_file" v-show="importFile">
          <ImportFile @closefile="importFile = false" />
        </div>
    </div>
</template>
<script setup>
import EditProduct from "@/components/product/editProduct.vue";
import ImportFile from "@/components/product/importFile.vue"
import { onBeforeMount, onMounted, ref } from "vue";
import http from "@/api/index";
import { date } from "@/utils/plugs";

/**获取商品列表参数 */
let typeid = ref("");       //分类id
let keyword = ref("");      //搜索关键字
let page = ref(1)           //搜索页数
let limit = ref(25)         //每页数量
let count = ref(0)          //商品总量
let count_page = ref(6)     //总页数
let proId = ref(0)          //商品id
let importFile = ref(false);

let transition = ref(false) //商品编辑窗口
let typeList = ref([
  {
    id: false,
    name: "全部分类",
  },
]);
let productList = ref([]);
const typeChange = (e) => {
  console.log(typeid.value);
};

onMounted(() => {});
onBeforeMount(() => {
  getType();
  getProduct();
});
const onClose = ()=>{
  transition.value = false
  proId.value = 0
}
//获取商品分类列表
const getType = async () => {
  var result = await http.typeList();
  if (result.data.status) {
    var arr = result.data.data;
    arr.forEach((element) => {
      typeList.value.push(element);
    });
  }
};
//获取商品列表
const getProduct = async () => {
  var params = {
    keyword:keyword.value,
    page:page.value,
    typeid:typeid.value
  }
  // console.log(params);
  var result = await http.productList({params});
  if (result.data.status) {
    var list = result.data.data.list;
    list.forEach((element) => {
      element.createtime = date(element.createtime);
    });
    count_page.value = Math.ceil(result.data.data.count/limit.value);

    count.value = result.data.data.count

    productList.value = list;
    // console.log(list)
  }else{
    productList.value = []
  }
};
//查询按钮
const sreach = async ()=>{
  page.value = '1'
  getProduct();
}
//查询框失焦
const onBlur = ()=>{
  getProduct()
}
//页数
const pageHandle = (status)=>{
  var page_num = page.value;
  if(status == '+'){
    page_num += 1
    page.value =  page_num > count_page.value ? count_page.value : page_num;
  }else if(status == '-'){
    page_num -= 1;
    page.value = page_num < 1 ? 1 : page_num
  }else if(status == 'start'){
    page.value = 1
  }else if(status == 'end'){
    page.value = count_page.value
  }else{
    return;
  }
  getProduct();
}
//添加商品
const addProduct = async () => {
  if(proId.value){
    transition.value = false
    proId.value = 0
  }
  setTimeout(()=>{transition.value = true},1)
    
  // console.log(transition.value)
};
//编辑商品
const editProduct = (proid)=>{
  if(proid == proId.value){
    return
  }else{
    transition.value = false;
  }
  setTimeout(()=>{
    transition.value = true;
  },1)
  proId.value = proid
}
//导入文件
const daoru = ()=>{

}
</script>
<style scoped>
@import "@/assets/css/common.css";
@import "@/assets/css/productinfo.css";
</style>